<template>
  <div>
    <div style="margin-top: 10px; margin-bottom: 20px">
      <el-input
          v-model="pid"
          class="w-50 m-2"
          placeholder="输入购货单单号"
          :prefix-icon="Search"
          size=""
          style="width: 250px;margin-right: 5px"
          clearable
      />
      <el-input
          v-model="oid"
          class="w-50 m-2"
          placeholder="输入订单单号"
          :prefix-icon="Search"
          size=""
          style="width: 250px;margin-right: 5px"
          clearable
      />
      <el-select placeholder="请选择任务类型" clearable="true" style="margin-right: 5px" v-model="type">
        <el-option
            v-for="(item, index) in typecase"
            :key="item"
            :label="item"
            :value="index">
        </el-option>
      </el-select>
      <!--      <el-button type="primary" style="margin-left: 10px" @click = "search">查询</el-button>-->
      <el-button :icon="Search" circle style="margin-left: 10px" @click = "search"/>
      <el-button :icon="CirclePlus" circle @click="addSupply" />

    </div>
    <el-divider></el-divider>
    <el-scrollbar>
      <el-table :data="tableData" border height="542px" row-style="height:50px" stripe style="width: 100%">
        <el-table-column :index="getIndex" label="序号" type="index" width="150"/>
        <el-table-column label="价格"  prop="purchasePrice" width="200"/>
        <el-table-column label="类型" prop="purchaseType" width="100px"/>
        <el-table-column label="供应商" prop="vendor" width="300px"/>
        <el-table-column label="供应商联系电话" prop="vendorContact" width="150px"/>
        <el-table-column label="供应商负责人" prop="vendorContactPerson" width="200px"/>
        <el-table-column fixed="right" label="操作" prop="">
          <template #default="scope">
            <el-button  color="#97d578" plain  round size="default" @click="look(scope.row)">详细联系信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page=pageNow
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          :total=totalSize
          background
          layout="total, prev, pager, next"
          style="margin-top: 15px"
          @current-change="pageChange"
      >
      </el-pagination>

      <el-dialog v-model="Visible" center title="详细商品信息" width="60%">
        <el-table :data="rowData" border>
          <el-table-column label="商品ID" prop="goodId" width="200"/>
          <el-table-column label="商品名称" prop="goodName" width="200"/>
          <el-table-column label="商品数量" prop="goodCount" width="200"/>
          <el-table-column label="商品价格" prop="price" width="200"/>
        </el-table>
      </el-dialog>
      <el-dialog v-model="visible" center title="添加购货单">
        <div style="height: 400px;overflow: auto">
          <el-form>
            <el-form-item label="请选择供应商">
              <el-select placeholder="请选择供应商" clearable="true" style="margin-right: 5px" v-model="vendor" @change="getTableData">
                <el-option
                    v-for="item in vendors"
                    :key="item.vendorName"
                    :label="item.vendorName"
                    :value="item.vendorName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-table :data="tableData1" border row-style="height:50px" stripe style="width: 100%">
            <el-table-column :index="getIndex" label="序号" type="index"/>
            <el-table-column label="商品ID" prop="goodId"/>
            <el-table-column label="商品名称" prop="goodName"/>
            <el-table-column label="商品价格" prop="goodPrice"/>
            <el-table-column label="商品数量">
              <template v-slot="scope">
                <el-input-number v-model="scope.row.goodCount" :min="0"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addSupplySucc">确认</el-button>
        </span>
        </template>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>

<script>
import Header from "@/components/Header";
import {MoreFilled, Search, CirclePlus} from "@element-plus/icons-vue";
import axios from "axios";

export default {
  name: "SupplyManage",
  components: {Header},
  data() {
    return {
      MoreFilled,
      Search,
      CirclePlus,
      oid:'',
      pid:'',
      tableData:[
      ],
      rowData:[
      ],
      tvalue:'',
      pageSize:10,
      totalSize:100,
      pageNow:1,
      vendorName:'',
      zip:'',
      Visible:false,
      data:{},
      pstate:0,
      typecase:['缺货购货单','新商品购货单','预警购货单'],
      type:'',
      visible:false,
      vendor:'',
      vendors:[],
      tableData1:[]
    }
  },
  methods:{
    addSupplySucc(){
      console.log(this.tableData1)
      let map = new Map();
      let list = [];
      this.tableData1.forEach((item)=>{
        var p = new Object();
        p.goodId = item.goodId;
        p.goodName = item.goodName;
        p.goodCount = item.goodCount;
        p.price = item.costPrice;
        p.goodOrderId = 1;
        list.push(p)
      })
      map.set('vendor', this.vendor)
      map.set('goodInfoList',list)
      this.$axios.post('http://localhost:1080/supply/supply',{
        vendor:this.vendor,
        goodInfoList:list
      }).then(res=>{
        res = res.data
        if (res.code == '200') {
          this.visible = false
          this.loadPost()
        }
      })
    },
    getTableData(){
      if (this.vendor == ''){
        this.tableData1 = []
        return
      }
      this.$axios.post("http://localhost:1080/goods/page",{
        pageNow:1,
        pageSize:9999999,
        vendor:this.vendor
      }).then(res=>{
        res = res.data
        if (res.code == 200) {
          this.tableData1 = res.data.rowData
          this.tableData1.forEach((item)=>{
            item.goodCount=0
          })
          console.log(this.tableData1)
        }
      })
    },
    addSupply(){
      this.visible = true
      this.$axios.get("http://localhost:1080/vendor/").then(res=>{
        res = res.data
        if(res.code == '200'){
          this.vendors = res.data
        }
      })
    },
    search(){
      console.log(this.type)
      axios.post("http://localhost:1080/supply/page",{
        purchaseOrderId:this.pid,
        orderId:this.oid,
        purchaseType:this.type,
        pageNow:this.pageNow,
        pageSize:this.pageSize,
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 1
        } else {
          this.tableData = []
          this.totalSize = 0
        }

      })

    },
    look(row){
      console.log(row)
      this.rowData=[]
      this.rowData = row.goodInfoList
      console.log(this.rowData)
      this.Visible = true
    },
    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow)
      this.$axios.post("http://localhost:1080/vendor/page",{
        status:this.status,
        date:this.tvalue,
        type:this.type,
        pageNow:this.pageNow,
        pageSize:this.pageSize,
        isReceipt:1
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        }else {
        }

      })
    },
    search1() {
    },
    loadPost(){
      this.$axios.post("http://localhost:1080/supply/page",{
        pageSize:10,
        pageNow:1
      }).then(res=>{
        res=res.data
        console.log(res)
        if (res.code == '200'){
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          console.log(res.data)
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    }
  },
  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>
body .el-table th.gutter {
  display: table-cell !important
}
.co1{
  background: #77c7d0;

}
.co2{
  background: #d9bf17;
}
.oo{
  background: #97d578
}
</style>